<template>
    <div class="vea-login-box">
        <el-card class="vea-card">
            <template #header>管理员登录</template>
            <el-form class="vea-form-login" ref="login" :model="loginInfo" :rules="rules">
                <el-form-item prop="account">
                    <el-input prefix-icon="User" placeholder="请输入账号/手机号" v-model="loginInfo.account" autocomplete/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="Unlock" type="password" placeholder="请输入密码"
                              v-model="loginInfo.password"/>
                </el-form-item>
                <el-form-item prop="captcha">
                    <div class="vea-check-image-input">
                        <div class="vea-check-image-input-items">
                            <el-input prefix-icon="ChatSquare" placeholder="请输入验证码" v-model="loginInfo.captcha"/>
                        </div>

                        <el-image :src="captchaImg" @click="updateCaptcha"/>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round :loading="loading" @click="submit(login)">立即登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import {$ajax, apiUrl} from "@/utils/request";
import {ref} from "vue";
import router from "@/router";

const login = ref()
const loginInfo = ref({
    account: null,
    password: null,
    captcha: null
})
const captchaImg = ref(`/api_image/captcha.html?$_=${Math.random()}`)
const updateCaptcha = () => {
    captchaImg.value = `/api_image/captcha.html?$_=${Math.random()}`
}

const rules = ref({
    account: [
        {required: true, message: '管理员账号不能为空'}
    ],
    password: [
        {required: true, message: '请输入账号密码'}
    ],
    captcha: [
        {required: true, message: '请输入4位验证码'},
        {mine: 4, max: 4, message: '请输入4位验证码'},
    ]
})
const loading = ref(false)
const submit = (refs) => {
    refs.validate(err => {
        loading.value = err

        if (err) {
            $ajax.post(`${apiUrl}/auth/login`, loginInfo.value).then(() => {
                loading.value = false
                router.replace({name: "home"})
            }).catch(() => {
                loading.value = false
                updateCaptcha()
            })
        }
    })
}
</script>
<style lang="less" scoped>
.vea-login-box {
  background: var(--default-bg-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .vea-card {
    position: fixed;
    width: 320px;
    height: 280px;
    top: 50%;
    margin-top: -140px;
    left: 50%;
    margin-left: -160px;

    /deep/ .el-input {
      border: none !important;

      .el-input__wrapper {
        box-shadow: 0 0 0 0 !important;
        border-bottom: 1px solid var(--el-input-border-color, var(--el-border-color));
        border-radius: 0;
      }
    }

    .vea-check-image-input {
      display: flex;
      justify-content: space-between;

      .vea-check-image-input-items {
        width: 60%;
        margin-right: 5px;
      }

      .el-image {
        width: 40%;
        cursor: pointer;
      }
    }

    .el-button {
      width: 90%;
      margin: auto;
    }
  }
}
</style>
